<template>
  <div class="cinema-detail">
    <div class="box"></div>
    <div class="top">
      <van-nav-bar
        fixed
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </div>
    <div class="cinema-info">
      <span class="name">{{cinemaName}}</span>
      <span class="address">
        <van-icon name="location-o" />
        {{cinemaAddress}}</span
      >
      <span class="tel">
        <!-- <span class="icon icon-tel"> -->
        <van-icon name="phone-o" />
        <span>{{cinemaPhone}}</span></span
      >
    </div>
    <el-carousel
      :autoplay="false"
      :interval="4000"
      type="card"
      height="12rem"
      indicator-position="none"
      arrow="never"
      :loop="false"
    >
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <div class="movie-info">
      <span class="arrow"></span>
      <span class="main"
        ><span class="name">比悲伤更悲伤的故事</span
        ><span class="score">
          <!-- <span class="num">{{ item.score.toFixed(1) }}分</span> -->
          <span style="font-size: 1rem">9.5分</span></span
        ></span
      >
      <span class="intro">
        <span class="time">105分钟</span>&nbsp;<span class="split">|&nbsp;</span
        ><span class="type">恐怖&nbsp;</span><span class="split">|&nbsp;</span
        ><span class="actors">蔡徐坤</span>
      </span>
    </div>
    <!-- <van-divider /> -->
    <van-tabs v-model="selectedId">
      <van-tab v-for="item in items" :key="item.id">
        <template #title>
          {{item.lable}}
        </template>
        <div>
          <cinema-foot v-for="index in 6" :key="index"></cinema-foot>
        </div>
      </van-tab>
    </van-tabs>
    
  </div>
</template>

<script>
import Vue from "vue";
import { Carousel, CarouselItem } from "element-ui";
import CinemaFoot from "@/components/cinema_foot.vue";
import LyTab from "ly-tab";

Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(LyTab);
export default {
  components: {
    "cinema-foot": CinemaFoot,
  },
  data() {
    return {
      selectedId: 0,
      items: [{ lable: "7月26日" },{ lable: "7月26日" },{ lable: "7月26日" }],
      cinemaName: this.$route.query.cinemaName,
      cinemaAddress:this.$route.query.cinemaAddress,
      cinemaPhone:this.$route.query.cinemaPhone,
    };
  },
  methods: {
    changeLyTabItem() {
      console.log("日期选择");
    },
  },
};
</script>

<style scoped>
.name-ellipsis {
  font-size: 21px;
  font-weight: 700;
}
.cinema-detail {
  width: 100%;
  height: 100%;
  color: #000;
}
.box {
  height: 2rem;
}
.top {
  width: 100%;
  z-index: 4;
  position:absolute;
}
.cinema-info {
  margin-top: 2rem;
  margin-left: 0.5rem;
  color: #888;
  display: flex;
  flex-flow: column;
  padding: 0.25rem;
  /* border-bottom: 1px solid #d3dce6; */
}
.address {
  width: 90%;
  margin-bottom: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.tel {
  margin-bottom: 0.2rem;
}
.movie-info {
  height: 1.4px;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-bottom: 3rem;
  margin-top: 1.5rem;
  /* margin-bottom: 1rem; */
}
.arrow {
  border: 0.2rem solid transparent;
  border-bottom: 0.2rem solid #fff;
  margin-top: -0.38rem;
  z-index: 999;
}
.main {
  font-size: 0.345rem;
}
.name {
  font-size: 1.2rem;
  line-height: 0.8rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.9rem;
}
.score {
  color: #ffb400;
  margin-left: 0.3rem;
  font-size: 0.1rem;
}
.num {
  font-size: 0.3125rem;
  font-weight: 700;
}

.el-carousel__item {
  margin-top: 0.65rem;
  margin-left: 8%;
  /* padding: 0 1rem; */
  height: 90%;
  width: 8rem;

  background-color: #d3dce6;
}
.el-carousel {
  background: linear-gradient(to bottom, #262546 0%, #11182b 100%);
}
.top /deep/ .van-nav-bar .van-nav-bar__text {
  color: black;
  font-size: 1rem;
}
.top /deep/ .van-nav-bar .van-icon {
  color: black;
}
</style>
